<template>
   <div class="box">
        <div ref="lineEchart" id="lineEchart" class="echart"></div>
       <div class="box_bg"></div>
   </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref , nextTick } from "vue";


const lineEchart = ref(null);

var lineOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
        type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
        type: 'category',
        data: ['棉花1', '棉花2', '棉花3', '棉花4', '棉花5', '棉花6', '棉花7'],
            axisTick: {
                alignWithLabel: true
            },
        }
    ],
    axisLabel:{
        color:"#fff"
    },
    yAxis: [
        {
        type: 'value'
        }
    ],
    yxisLabel:{
        color:"#fff"
    },
    series: [
        {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        showBackground: true,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
            ])
        },
        emphasis: {
            itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
            ])
            }
        },
        data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};


nextTick( () => {
    let line = echarts.init(lineEchart.value);
    line.setOption(lineOption);

})







</script>
<style  scoped>
    .box{
        width: 240px;
        height: 600px;
     
    }   
    .box_bg{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        filter: blur(1px);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
    }

    .echart{
        width: 96%;
    }

    #lineEchart{
        height: 200px;
        margin: 10px;
    }
</style>